<template>
  <view class="viewport">
    <scroll-view
      class="scroll-view"
      :refresher-triggered="refreshing"
      scroll-y="true"
      lower-threshold="20"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresh"
    >
      <view class="warp">
        <!-- 左侧菜单 -->
        <view class="left-menu">
          <view
            class="menu-item"
            :class="{ active: activeIndex === index }"
            v-for="(item, index) in menuList"
            :key="index"
            @tap="handleMenuClick(index)"
          >
            {{ item.name }}
          </view>
        </view>
        <!-- 右侧详情 -->
        <view class="right-content">
          <view class="repair-info">
            <view class="info-item">
              <text class="label">维修负责人</text>
              <text class="value">{{ currentRepair.repairPerson }}</text>
            </view>
            <view class="info-item">
              <text class="label">维修总用时</text>
              <text class="value">{{ currentRepair.totalTime }}</text>
            </view>
            <view class="info-item">
              <text class="label">接单</text>
              <text class="value">{{ currentRepair.receiveTime }}</text>
            </view>
            <view class="info-item">
              <text class="label">开始维修</text>
              <text class="value">{{ currentRepair.startTime }}</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 菜单列表数据
const menuList = ref([
  { name: "堂浩岚" },
  { name: "许含娇" },
  { name: "李建" },
  { name: "萧文惠" },
  { name: "潘悦恺" },
  { name: "柴苑亦" },
]);

// 当前选中的菜单索引
const activeIndex = ref(0);

// 当前维修信息
const currentRepair = ref({
  repairPerson: "维修负责人",
  totalTime: "1小时30分钟",
  receiveTime: "2025.06.11 15:27:15",
  startTime: "2025.06.11 15:27:15",
});

// 处理菜单点击
const handleMenuClick = (index) => {
  activeIndex.value = index;
  // 这里可以根据选中的人员更新右侧详情
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: skyblue;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f1f1f1;
}
.scroll-view {
  height: 100%;
}
.warp {
  background-color: #fff;
  display: flex;
  height: 100%;

  .left-menu {
    width: 200rpx;
    background-color: #f8f8f8;
    border-right: 1px solid #eee;

    .menu-item {
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 28rpx;
      color: #333;
      border-bottom: 1px solid #eee;

      &.active {
        background-color: #fff;
        color: #0052d9;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 6rpx;
          height: 36rpx;
          background-color: #0052d9;
        }
      }
    }
  }

  .right-content {
    flex: 1;
    padding: 30rpx;

    .repair-info {
      background-color: #fff;
      border-radius: 12rpx;
      padding: 20rpx;

      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        border-bottom: 1px solid #f5f5f5;

        &:last-child {
          border-bottom: none;
        }

        .label {
          color: #666;
          font-size: 28rpx;
        }

        .value {
          color: #333;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>
